<!DOCTYPE html>
<html lang="" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/bootstrap-theme.css">

    <title>小萌神订餐网</title>
    <!-- 图标 -->
    <link rel="short icon" href="image/eat0.ico"/>
    <link rel="stylesheet" href="css/index.css"/>
    <script src="https://unpkg.com/vue@2.7.14/dist/vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        .isShow{
            bottom:0;
        }

    </style>
</head>
<body>

<div id="app">

    <div class="head">
        小萌神订餐网
        <div class="right">
            <span class="showlogin" id="showlogin" @Click="loginflag=!loginflag">登录</span>
            <span id="exitspan" v-if="isLoginflag">
                欢迎您：{{user.username}}<a @click="loginOut">退出</a>
            </span>
        </div>
    </div>

    <div class="content">
        <ul class="allfoods" id="allfoods">
            <li v-for="(item,index) in dataset">
                <h3 @click="showFood(item.fid)">{{item.fname}} |<span class="badge">{{item.detail_count}}</span></h3>
                <div class="fooddesc" v-show="item.status">
                    <img :src=`${item.fphoto}` classhowFoods="foodimg"/>
                    <article class="foodprice">
                        <p>{{item.detail}}</p>
                        <p class="normalprice">{{item.mormprice}}</p>
                        <p class="realprice">{{item.realprice}}</p>
                        <p class="buybtn" @click="addCart(item.fid,1)">加入购物车</p>
                    </article>
                </div>
            </li>
            <a href="javascript:void" @click.prevent="clickPage(1)">第一页</a>
            <a href="javascript:void" @click.prevent="clickPage(pagebean.pre)">上一页</a>
            <a href="javascript:void" @click.prevent="clickPage(pagebean.next)">下一页</a>
            <a href="javascript:void" @click.prevent="clickPage(pagebean.totalpages)">最后一页</a>
            总共{{pagebean.total}}条记录，每页{{pagebean.pagesize}}条记录，当前第{{pagebean.pageno}}页，共{{pagebean.totalpages}}页
        </ul>


    </div>
    <!--  <div class="look">浏览记录</div> -->
    <div class="shoppingcar">
        <div class="carbag" id="carbag" :class="{ isShow:isHiden==true,isHide:isHiden==false }">
            <p>购物车<span id="del" @click="clearAll">[清空]</span></p>
            <table id="bagcontent">
                <tr v-for="cartItem in cartItemsArray">
                    <td class="bagfname">{{cartItem.resFood.fname}}</td>
                    <td class="bagnum">
                        <button type="button" @click="addCart(cartItem.resFood.fid, 1)">+</button>
                            <span>{{cartItem.num}}</span>
                        <button type="button" @click="addCart(cartItem.resFood.fid, -1)">-</button>
                    </td>
                    <td>{{cartItem.smallCount}}</td>
                </tr>
            </table>
        </div>
        <div class="carprice" @click.prevent="displayCart()">￥{{totalPrices}}</div>
        <div class="carinfo" v-if="cartItemsArray.length<=0">购物车是空的</div>
        <div class="carinfo" v-else @click.prevent="orderflag=!orderflag">立即下单</div>
    </div>
    <div class="footer">
        Copyright © 2016 Xiaomengsheng Incorporated Company. All rights reserved.
        <br/>
        订餐，就上小萌神订餐网!
    </div>

    <div class="login" id="login" v-if="loginflag">
        <span id="unshow" @click="loginflag=false">X</span>
        <form name="myform">
            <table>
                <tr>
                    <td class="labname"><label for="username">用户名：</label></td>
                    <td><input type="text" name="username" placeholder="请输入用户名"
                               id="username" v-model="loginusername"/></td>
                </tr>
                <tr>
                    <td class="labname"><label for="pwd">密码：</label></td>
                    <td><input type="password" name="pwd" placeholder="请输入密码"
                               id="pwd" v-model="loginpwd"/></td>
                </tr>
                <tr>
                    <td class="labname"><label for="yzm">验证码：</label></td>
                    <td><input type="text" name="yzm" placeholder="请输入验证码"
                               id="yzm" v-model="loginyzm"/></td>
                    <td><img :src='yzmUrl'
                             id="yzm_img" @click="changeYZM"/></td>
                </tr>
            </table>
        </form>
        <input type="button" value="login" class="btn" id="btn" @click="isLogin"/>
        <div style="background-color: #9acfea">没有账号？<a href="#" @click="showRegister">注册</a></div>
    </div>
<!--   注册部分-->
    <div class="login" id="register" v-if="registerflag">
        <span  @click="registerflag=false">X</span>
        <form name="myform">
            <table>
                <tr>
                    <td class="labname"><label for="name">姓名：</label></td>
                    <td><input type="text" name="name" placeholder="请输入姓名" id="name" v-model="registername"></td>
                </tr>
                <tr>
                    <td class="labname"><label for="email">邮箱：</label></td>
                    <td><input type="text" name="email" placeholder="请输入邮箱" id="email" v-model="registeremail"></td>
                    <td><a href="#" class="yzm_btn" v-bind:class="{disabled: sendBtnDisabled}" @click.prevent="sendEmail">{{sendBtnText}}</a></td>
                </tr>
                <tr>
                    <td class="labname"><label for="emailcode">验证码：</label></td>
                    <td><input type="text" name="emailcode" placeholder="请输入验证码" id="emailcode" v-model="emailcode"></td>
                </tr>
                <tr>
                    <td class="labname"><label for="pwd">密码：</label></td>
                    <td><input type="password" name="pwd" placeholder="请输入密码" id="password" v-model="registerpwd"></td>
                </tr>
                <tr>
                    <td class="labname"><label for="confirm_pwd">确认密码：</label></td>
                    <td><input type="password" name="confirm_pwd" placeholder="请再次输入密码" id="confirm_pwd" v-model="confirmPwd"></td>
                    <td style="font-size: smaller">{{message}}</td>
                </tr>
            </table>
        </form>
        <input type="button" value="register" class="btn"  @click="isRegister"/>
        <div style="background-color: #9acfea">已有账号？<a href="#" @click="showLogin">登录</a></div>
    </div>

    <!-- 订单信息 -->
    <div class="login" id="myinfo" v-if="orderflag">
        <span id="unshowinfo" @click="hideCart">X</span>
        <form name="forminfo">
            <table>
                <tr>
                    <td class="labname"><label for="address">送货地址:</label></td>
                    <td><input name="address" type="text" placeholder="请输入送货地址" id="address" v-model="orderInfo.address"/></td>
                </tr>
                <tr>
                    <td class="labname"><label for="tel">联系电话:</label></td>
                    <td><input type="text" id="tel" placeholder="请输入联系电话" name="tel" v-model="orderInfo.tel"/></td>
                </tr>
                <tr>
                    <td class="labname"><label for="deliverytime">送货时间:</label></td>
                    <td><input type="text" name="deliverytime" id="deliverytime"
                               placeholder="请输入送货时间（默认马上发货）" v-model="orderInfo.deliverytime"/></td>
                </tr>
                <tr>
                    <td class="labname"><label for="ps">附言:</label></td>
                    <td><input type="text" id="ps" placeholder="请输入附言" name="ps" v-model="orderInfo.ps"/></td>
                </tr>
            </table>
        </form>
        <input type="button" value="提交" class="btn" @click="confirmOrder" id="submit">
    </div>

</div>

<!--  在网页里面引入javascript    jquery:DOM   大家注意顺序  -->
<script src="js/jquery-1.9.1.js"></script>
<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
<script type="text/javascript">
    let vm = new Vue({
        el: "#app",
        data: {
            isHiden: false,
            orderflag: false,     //送货地址div
            loginflag: false,
            isLoginflag: false,
            pagebean: {
                pageno: 1,
                pagesize: 5,
                pre: 1,
                next: 2,
                sortby: "fid",
                sort: "desc",
                totalpages: 3
            },
            cartItemsArray: [],
            user: {
                uid: null,
                username: null,
                email: null,
            },
            yzmUrl: 'http://127.0.0.1:8000/resfood/code.action',
            dataset: [],
            userSet: [],
            totalPrices: 0,
            loginusername: '',
            loginpwd: '',
            loginyzm: '',
            orderInfo:{
                address:'Ququark',
                tel:'12345678901',
                deliverytime:'2023-11-02 11:45:14',
                ps: '快快'
            },
            registerflag: false,
            sendBtnText: '发送',
            sendBtnDisabled: false,
            registername: '',
            registeremail: '',
            registerpwd: '',
            emailcode: '',
            confirmPwd: '',
            message: ''
        }, computed: {
            showPage: function (pageno) {
                axios.get("resfood/findByPage?pageno=" + pageno + "&pagesize=" + this.pagebean.pagesize + "&sortby=" + this.pagebean.sortby + "&sort=" + this.pagebean.sort).then(res => {
                    this.dataset = res.data;
                })
            }
        },
        //页面打开时的操作
        mounted: function () {
            axios.all([this.showPage(1), this.getLoginedUser(),this.getCartInfo()]).then(
                axios.spread(function (d1, d2, d3) {
                    let jsonModel = d1.data;
                    this.userSet = d2.data;
                    var cartModel=d3.data;
                    console.log(jsonModel.code)
                    if (jsonModel.code === 200) {
                        vm.displayPage(jsonModel);
                    }
                    if (this.userSet.code === 200) {
                        vm.showUser(this.userSet)
                    }
                    if(cartModel.code===1){
                        vm.showCardInfo(cartModel.obj)
                    }
                })
            )
        },
        methods: {
            // 发送邮件
            sendEmail() {
                if (this.sendBtnDisabled) {
                    return false;
                }
                if (this.registeremail === '') {
                    this.message = '请输入邮箱';
                    return false;
                }
                axios.get("/sendEmail?email="+this.registeremail)
                this.sendBtnText = '发送中...';
                this.sendBtnDisabled = true;
                setTimeout(() => {
                    this.sendBtnText = '重新发送';
                    this.sendBtnDisabled = false;
                }, 60000);
            },

            // 注册
            isRegister() {
                if (this.registername === '') {
                    this.message = '请输入姓名';
                    return false;
                }
                if (this.registeremail === '') {
                    this.message = '请输入邮箱';
                    return false;
                }
                if (this.registerpwd === '' || this.confirmPwd === '') {
                    this.message = '请输入密码和确认密码';
                    return false;
                }
                if (this.registerpwd !== this.confirmPwd) {
                    this.message = '两次输入的密码不一致';
                    return false;
                }
                var params=new URLSearchParams();
                params.append("username",this.registername)
                params.append("pwd",this.registerpwd)
                params.append("email",this.registeremail);
                params.append("yzm",this.emailcode)
                params.append("way","register");
                axios.post("resuser/login", params).then(res => {
                    this.userSet = res.data;
                    if (this.userSet.code !== 200) {
                        alert(this.userSet.msg)
                    } else {
                        this.showUser(this.userSet)
                        this.registerflag=false;
                    }
                });

            },

            // 跳转到登录界面
            showLogin:function() {
                this.registerflag = false;
                this.loginflag = true;
            },
            showRegister:function (){
                this.registerflag = true;
                this.loginflag = false;
            },

            confirmOrder: function (){
                var params=new URLSearchParams();
                params.append("address",this.orderInfo.address)
                params.append("ps",this.orderInfo.ps)
                params.append("tel",this.orderInfo.tel)
                // params.append("deliverytime",this.date.now())
                axios.post("resOrder/confirmOrder",params).then(res=>{
                    var jsonMOdel=res.data;
                    if(jsonMOdel.code===200){
                        this.cartItemsArray=[];
                        this.totalPrices=0;
                        this.isHide=false;
                        alert("提交订单成功")
                        this.orderflag=false
                    }
                })

            },
            displayPage: function (jsonModel) {
                if (jsonModel.code === 200) {
                    jsonModel.data.dataset.forEach((item, index) => {
                        item.status = false;
                    });
                    this.pagebean = jsonModel.data;
                    this.dataset = jsonModel.data.dataset;
                }
            },
            clickPage: function (pageno) {
                const promise = this.showPage(pageno);
                promise.then(result => {
                    this.displayPage(result.data);
                })
            },
            showFood: function (fid) {
                this.dataset.forEach((item, index) => {
                    item.status = (fid === item.fid);
                });
                console.log(this.dataset);
                axios.get("resfood/detailCountAdd?fid="+fid).then(res=>{
                    var jsonModel=res.data;
                    if(jsonModel.code===200){
                        var count=jsonModel.data;
                    }
                })
            },
            addCart: function (fid, num) {
                if (this.user.username == null) {
                    alert("请先登录");
                    this.loginflag = true;
                    return;
                }
                var params = new URLSearchParams();
                params.append("num", num);
                params.append("fid", fid);
                axios.post("resOrder/addCart", params).then(res => {
                    var jsonModel = res.data;
                    if (jsonModel.code === -1) {
                        alert("请登录");
                        this.loginflag = true;
                        return;
                    }
                    if (jsonModel.code === 500) {
                        alert("添加失败");
                        return;

                    }
                    this.showCartInfo(jsonModel.obj)
                })
            },
            isLogin: function () {
                let _this = this;
                var params = new URLSearchParams()
                params.append("username", _this.loginusername);
                params.append("pwd", _this.loginpwd);
                params.append("yzm", _this.loginyzm);
                params.append("way","login");
                axios.post("resuser/login", params).then(res => {
                    this.userSet = res.data;
                    if (this.userSet.code !== 200) {
                        alert(this.userSet.msg)
                        this.changeYZM();
                    } else {
                        this.showUser(this.userSet)
                    }
                });

            },
            showUser:function (userSet){
                this.user.uid =userSet.user.userid;
                this.user.username = userSet.user.username;
                this.user.email = userSet.user.email;
                alert("欢迎您:" + userSet.user.username)
                this.loginflag = false;
                this.isLoginflag = true;
            },
            loginOut: function () {
                var _this = this;
                axios.get("resuser/logout").then(res => {
                    var jsonModel = res.data;
                    _this.user.uid = null;
                    _this.user.email = null;
                    _this.user.username = null;
                    _this.loginflag = false;
                    _this.isLoginflag = false;
                });
            },
            changeYZM: function () {
                var d = new Date();//获取系统当前时间
                this.yzmUrl = "http://127.0.0.1:8000/resfood/code.action?" + d.getUTCSeconds();
            },
            clearAll: function () {
                axios.get("resOrder/clearAll").then(res => {
                    var jsonModel = res.data;
                    if (jsonModel.code === 1) {
                        this.showCartInfo(jsonModel);
                    }
                })

            },
            showCartInfo: function () {
                axios.get("resOrder/getCartInfo").then(res => {
                    var jsonModel = res.data;
                    if (jsonModel.code === 1) {
                        this.showCardInfo(jsonModel.obj);
                    } else {
                        this.cartItemsArray = [];
                        this.totalPrices = 0;
                        this.isHide = false;
                    }
                })
            },
            displayCart: function () {
                this.isHiden = !this.isHiden;
            },

            hideCart: function () {
                this.orderflag = false;


            },
            showCardInfo: function (cartItemsArray) {
                this.cartItemsArray = cartItemsArray;
                this.totalPrices=0;
                this.cartItemsArray.forEach((item, index) => {
                    this.totalPrices += item.smallCount;
                })
            },
            //以下三个是打开时实行的js代码
            showPage: function (pageno) {
                return axios.get("resfood/findByPage?pageno=" + pageno + "&pagesize=" + this.pagebean.pagesize + "&sortby=" + this.pagebean.sortby + "&sort=" + this.pagebean.sort)

            },
            getLoginedUser: function () {
                return axios.get("resuser/isLogin");
            },
            getCartInfo: function () {
                return axios.get("resOrder/getCartInfo");
            },


        }
    })
</script>

</body>
</html>